<template>
  <div class="common-layout">
    <el-container>
      <el-header>
        <el-menu
            :default-active="activeIndex2"
            class="el-menu-demo"
            mode="horizontal"
            background-color="rgb(72,160,248)"
            text-color="#fff"
            active-text-color="#fff"
            @select="handleSelect"
        >
          <div style="display: flex;" index="1">
            <div>
              Processing Center
            </div>
          </div>
          <div class="flex-grow"/>
          <div style="display: flex;" index="2">
            <img src="http://39.105.101.77:8080/logo.png"/>
          </div>

          <el-sub-menu style="display: flex;" index="3">
            <template #title>{{ username }}</template>
            <el-menu-item index="2-1">退出</el-menu-item>
          </el-sub-menu>
        </el-menu>
      </el-header>
      <el-container>
        <el-aside width="200px">
          <el-row class="tac">
            <el-col :span="24">
              <el-menu
                  default-active="2"
                  class="el-menu-vertical-demo"
                  @select="handleSelect"
                  @open="handleOpen"
                  @close="handleClose"
              >
                <el-sub-menu index="1">
                  <template #title>
                    <el-icon>
                      <location/>
                    </el-icon>
                    <span>挂号收费</span>
                  </template>
                  <el-menu-item index="1-1">窗口挂号</el-menu-item>
                  <el-menu-item index="1-2">窗口退号</el-menu-item>
                  <el-menu-item index="1-3">收费</el-menu-item>
                  <el-menu-item index="1-4">退费</el-menu-item>
                  <el-menu-item index="1-5">费用记录查询</el-menu-item>
                </el-sub-menu>
                <el-sub-menu index="2">
                  <template #title>
                    <el-icon>
                      <location/>
                    </el-icon>
                    <span>门诊医生</span>
                  </template>
                  <el-menu-item index="2-1">患者查看</el-menu-item>
                  <el-menu-item index="2-2">医生诊疗: 病历首页</el-menu-item>
                  <el-menu-item index="2-3">医生诊疗: 检查申请</el-menu-item>
                  <el-menu-item index="2-4">医生诊疗: 检验申请</el-menu-item>
                  <el-menu-item index="2-5">看诊记录</el-menu-item>
                  <el-menu-item index="2-6">医生诊疗: 检查结果</el-menu-item>
                  <el-menu-item index="2-7">医生诊疗: 检验首页</el-menu-item>
                  <el-menu-item index="2-8">医生诊疗: 门诊确认</el-menu-item>
                  <el-menu-item index="2-9">医生诊疗: 开设处方</el-menu-item>
                  <el-menu-item index="2-10">医生诊疗: 处置申请</el-menu-item>
                  <el-menu-item index="2-11">费用查询</el-menu-item>
                </el-sub-menu>
                <el-sub-menu index="3">
                  <template #title>
                    <el-icon>
                      <location/>
                    </el-icon>
                    <span>检查管理</span>
                  </template>
                  <el-menu-item index="3-1">item one</el-menu-item>
                  <el-menu-item index="3-2">item two</el-menu-item>
                  <el-menu-item index="3-3">item three</el-menu-item>
                </el-sub-menu>
                <el-sub-menu index="4">
                  <template #title>
                    <el-icon>
                      <location/>
                    </el-icon>
                    <span>检验管理</span>
                  </template>
                  <el-menu-item index="4-1">item one</el-menu-item>
                  <el-menu-item index="4-2">item two</el-menu-item>
                  <el-menu-item index="4-3">item three</el-menu-item>
                </el-sub-menu>
                <el-sub-menu index="5">
                  <template #title>
                    <el-icon>
                      <location/>
                    </el-icon>
                    <span>药房管理</span>
                  </template>
                  <el-menu-item index="5-1">item one</el-menu-item>
                  <el-menu-item index="5-2">item two</el-menu-item>
                  <el-menu-item index="5-3">item three</el-menu-item>
                </el-sub-menu>
                <el-sub-menu index="6">
                  <template #title>
                    <el-icon>
                      <location/>
                    </el-icon>
                    <span>处置管理</span>
                  </template>
                  <el-menu-item index="6-1">item one</el-menu-item>
                  <el-menu-item index="6-2">item two</el-menu-item>
                  <el-menu-item index="6-3">item three</el-menu-item>
                </el-sub-menu>
              </el-menu>
            </el-col>
          </el-row>
        </el-aside>
        <el-main>
          <router-view/>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  name: 'HomeView',
  data() {
    return {
      username: "张三"
    }
  },
  methods: {
    handleSelect(index, indexPath, item, routeResult) {
      if (index == '1-1') {
        this.$router.push("/home/onsite-registration")
      } else if (index == '2-1') {
        this.$router.push("/home/physician-patient")
      } else if (index == '2-2') {
        this.$router.push("/home/medical-record")
      } else if (index == '2-3') {
        this.$router.push("/home/check-request")
      }
    },
    handleOpen(index, indexPath) {
      // console.log(index);
      // console.log(indexPath);
    },
    handleClose(index, indexPath) {
      // console.log(index);
      // console.log(indexPath);
    }
  }
}
</script>

<style lang="scss">
header {
  background: rgb(72, 160, 248);
}

.el-menu {
  background: rgb(72, 160, 248);
}

.el-menu--horizontal {
  border-bottom: none;
}
</style>
